<template>
  <div class="card-list">
   <a-row  slot="extra"  class="selConfig">
        <a-radio-group v-model="config.keyWord['equal-daily_parttime_user-is_customer']" style="margin-top:10px" @change="dailyParttimeUserList">
          <a-radio-button value="">全部</a-radio-button>
          <a-radio-button value="0">已绑定</a-radio-button>
          <a-radio-button value="1">未绑定</a-radio-button>
        </a-radio-group>
        <a-input-search style="margin-left: 16px; width: 272px;margin-top:10px" v-model="config.keyWord['like-daily_parttime_user-nickName']"  placeholder="请搜索微信昵称"  
        @search="dailyParttimeUserList"
         />
      </a-row >

    
     


    <a-list
      :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
      :dataSource="dataSource"
      :loading="dataSourceLoading"
    >
      <a-list-item slot="renderItem" slot-scope="item">
        <!-- <template v-if="item.add">
          <a-button class="new-btn" type="dashed">
            <a-icon type="plus" />新增产品
          </a-button>
        </template> -->
        <template >
          <a-card :hoverable="true">
            <a-card-meta >
              <div style="margin-bottom: 3px" slot="title">{{item.nickName}}<a-tag style="margin-left:10px">{{item.source}}</a-tag></div>
              <a-avatar class="card-avatar" slot="avatar" :src="item.avatarUrl" size="large" />
              <div class="meta-content" slot="description">创建时间:{{item.create_time}}<br>
              <span v-show="item.is_customer == 0">已绑定: {{item.admins_nickName}}</span>
              </div>
              
            </a-card-meta>
            <a slot="actions" @click="bindUser(item)" > 绑定 </a>

            <a slot="actions" @click="clearBindUser(item)"  > 解绑 </a>
          </a-card>
        </template>
      </a-list-item>
    </a-list>


<div class="show-right">
    <a-pagination v-model="config.page" :total="total" :defaultPageSize="config.pageSize" show-less-items @change="dailyParttimeUserList"/>
 </div>

  </div>
</template>

<script>
// const dataSource = []
// dataSource.push({
//   add: true
// })


import {dailyParttimeUserList,dailyParttimeClearUserBind,dailyParttimeUserBind} from "@/services/dailyParttimeUser"


// for (let i = 0; i < 6; i++) {
//   dataSource.push({
//     title: 'Alipay',
//     avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
//     content: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
//   })
// }

export default {
  name: 'CardList',
  data () {
    return {
      config:{
          pageSize:6,
          page:1,
          keyWord:{
              'equal-daily_parttime_user-is_customer':'',
              'like-daily_parttime_user-nickName':''
          }
      },
      total:0,
      dataSource:[],
      dataSourceLoading:false,
    }
  },
   authorize: {
    clearBindUser: "解绑",
    bindUser: "绑定",
  
  },
  created(){
   this.dailyParttimeUserList()
  },
  methods:{
      async  dailyParttimeUserList(){
        this.dataSourceLoading = true
        let res =   await dailyParttimeUserList(this.config)
        if(res.code == 200){
            this.total = res.data.total
            this.dataSource = res.data.list
        }
        this.dataSourceLoading = false

      },
     async clearBindUser(item){
       if(item.is_customer == 1){
          this.$message.error("该账号未绑定客服");
         return 
       }
       this.dataSourceLoading = true

        let res =   await   dailyParttimeClearUserBind({id:item.id})
          if(res.code == 200){
                this.$message.success("解绑成功");
             this.dailyParttimeUserList()
          }
          this.dataSourceLoading = false


      },
     async  bindUser(item){
       if(item.is_customer == 0){
          this.$message.error("该账号已是客服");
          return
       }
       this.dataSourceLoading = true
       let res =   await   dailyParttimeUserBind({id:item.id})
          if(res.code == 200){
             this.$message.success("绑定成功");
             this.dailyParttimeUserList()
          }
          this.dataSourceLoading = false
      }
   
  }
}
</script>

<style lang="less" scoped>
  .card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 48px;
  }
  .new-btn{
    border-radius: 2px;
    width: 100%;
    height: 187px;
  }
  .meta-content{
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    height: 64px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .show-right{
      width: 100%;
      display: flex;
      justify-content: flex-end;
  }
  .selConfig{
      margin-bottom: 30px;
  }
</style>
